<%-- 
    Document   : gallery
    Created on : Aug 8, 2013, 12:23:06 PM
    Author     : dferreira
--%>

<%@page isELIgnored="false" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div id="container" class="cf">

    <div id="main" role="main">
        <section class="slider">
            <div class="images_div_gallery">
                <ul class="slides">
                    <li>
                        <img src="http://dl.dropboxusercontent.com/u/19347449/LanguageTeachScreens/installingLanguage.png" title="<spring:message code="gallery.install_a_language"/>"/>
                    </li>
                    <li>
                        <img src="http://dl.dropboxusercontent.com/u/19347449/LanguageTeachScreens/subjectsNavigation.png" title="<spring:message code="gallery.navigating_over_subjects"/>"/>
                    </li>
                    <li>
                        <img src="http://dl.dropboxusercontent.com/u/19347449/LanguageTeachScreens/workout.png" title="<spring:message code="gallery.choose_take_an_activity"/>"/>
                    </li>
                    <li>
                        <img src="http://dl.dropboxusercontent.com/u/19347449/LanguageTeachScreens/introduction.png" title="<spring:message code="gallery.introduction_screen"/>"/>
                    </li>
                </ul>
            </div>
        </section>
    </div>

</div>
<c:if test="${not_on_internet_explorer}">
    <link rel="stylesheet" type="text/css" href="css/images_div_gallery.css" media="screen" />
    <script defer src="pages/js/jquery.flexslider.js"></script>
    <script type="text/javascript" src="pages/js/shCore.js"></script>

    <script type="text/javascript">        
        $(function(){
            SyntaxHighlighter.all();
        });
        $(function(){
            var tabs_selector = '#tabs';
        
            $(tabs_selector).bind( "tabsshow", function(event, ui) {
                $('.images_div_gallery:visible').flexslider({
                    animation: "slide",
                    start: function(slider){
                        $('body').removeClass('loading');
                    }
                });
            }); 
        });
    </script>
</c:if>